<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 0;
		}
		.homeimg {
			width: 60px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.home {
			width: 20px;
			height: 20px;
		}
		.words {
			padding-left: 40px;
		}
		.words ul {
			margin-top: 22px;
		}
		.words li {
			font-size: 16px;
			color: #606266;
			line-height: 2;
		}
		.orderbox {
			width: 100%;
			height: 300px;
			display: flex;
		}
		.orderinfo {
			width: calc(20% - 8px);
			height: 100%;
			margin-right: 8px;
		}
		.totalorder {
			width: 100%;
			background: #5cbea0;
			border-radius: 8px;
			color: #fff;
			padding-top: 5px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
		}
		.userimg img {
			width: 45px;
			height: 45px;
		}
		.totalorder .numtitle {
			margin-top: 0;
		}
		.neworder {
			border: 1px solid #ccc;
			width: 100%;
			height: 120px;
			margin-top: 12px;
			padding: 10px;
		}
		.numtitle {
			font-size: 16px;
			margin-top: 5px;
		}
		.nums {
			font-size: 32px;
		}
		.jobs {
			display: flex;
			justify-content: space-between;
			border: 1px solid #ddd;
			margin-top: 15px;
			width: 100%;
			height: 80px;
			padding: 10px;
		}
		.orderrank {
			width: calc(20% - 8px);
			height: 100%;
			margin-left: 8px;
			background: rgb(94, 98, 104);
			color: #fff;
			border: 1px solid pink;
		}
		.ranktitle {
			font-size: 18px;
			white-space: nowrap;
			text-align: center;
			margin-top: 6px;
		}
		.rankline {
			width: 60%;
			height: 2px;
			background: #fff;
			margin: 10px auto;
		}
		.item {
			display: flex;
			justify-content: space-around;
		}
		.iteminfo {
			width: 20%;
			text-align: center;
			white-space: nowrap;
			font-size: 15px;
			line-height: 1.3;
		}
		.iteminfo:first-child {
			width: 10%;
		}
		.iteminfo:last-child {
			width: 30%;
		}
		.objectbox {
			margin-top: 10px;
			border: 1px solid #f4f4f4;
			position: relative;
			padding: 10px;
		}
		.object {
			display: flex;
			flex-wrap: wrap;
		}
		.objectname {
			border: 1px solid #f3f3f3;
			font-size: 14px;
			width: 130px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			margin-right: 16px;
			margin-top: 16px;
		}
		.table {
			margin-top: 20px;
		}
		.pagenation {
			text-align: center;
			margin-top: 10px;
		}
		#elcontain::-webkit-scrollbar {
			display: none;
		}
		.select {
			text-align: right;
			position: absolute;
			top: 5px;
			right: 10px;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
		.el-select .el-input {
			width: 105px;
		}
	</style>
</block>
<block name="content">
	<div>
		<div class="orderbox">
			<div class="orderinfo">
				<div class="totalorder">
					<div>
						<p class="numtitle">师傅总数</p>
						<p class="nums">{$count}</p>
					</div>
					<div class="userimg">
						<img src="__PUBLIC__/orderAdmin/img/user.png" alt="">
					</div>
				</div>
				<div class="neworder">
					<p class="numtitle">本月新增</p>
					<p class="nums">{$thisMonthCount}</p>
				</div>
				<div class="jobs">
					<div>
						<p class="numtitle">平均订单</p>
						<p class="nums">10</p>
					</div>
					<div>
						<p class="numtitle">人均报酬</p>
						<p class="nums">1234</p>
					</div>
				</div>
			</div>
			<iframe src="{:U('Index/map')}" width="60%" height="100%" frameborder="0" scrolling="no"></iframe>
			<div class="orderrank">
				<div class="ranktitle"><i class="el-icon-tickets"></i>师傅数 TOP 10 城市</div>
				<div class="rankline"></div>
				<div>
					<div class="item">
						<div class="iteminfo"></div>
						<div class="iteminfo"></div>
						<div class="iteminfo">人数</div>
						<div class="iteminfo">占比</div>
					</div>
					<div class="item" v-for="(item, index) in cityRank" :key="index">
						<div class="iteminfo">{{index + 1}}</div>
						<div class="iteminfo">{{item.city}}</div>
						<div class="iteminfo">{{item.job}}</div>
						<div class="iteminfo">{{item.percent}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="objectbox">
			<el-tabs type="card" v-model="activetab">
				<el-tab-pane label="全部师傅({$count})" name="first">
					<div class="table">
						<el-table :data="tableData"  style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}">
							<el-table-column prop="mobile" label="登录手机"></el-table-column>
							<el-table-column prop="name" label="姓名"></el-table-column>
							<el-table-column prop="province_city" label="城市"></el-table-column>
							<el-table-column prop="partner_name" label="所属城市合伙人"></el-table-column>
							<el-table-column label="状态">
								<template slot-scope="scope">
									<span v-if="scope.row.status == '1'">待审核</span>
									<span v-if="scope.row.status == '2'">审核不通过</span>
									<span v-if="scope.row.status == '3'">审核通过</span>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.id)">查看</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
			</el-tabs>
			<div class="select">
				<el-select size="small" v-model="province">
					<el-option v-for="item in prolist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
				<el-select size="small" v-model="city">
					<el-option v-for="item in citylist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
				<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
							   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
			</div>
		</div>
	</div>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    tomini: false,
                    province: "省份",
                    city: "城市",
                    imageUrl: '',
                    activetab: "first",
                    // 城市排名
                    cityRank: [
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" }
                    ],
                    prolist: [
                        {
                            value: 'guangdong',
                            label: '广东'
                        }, {
                            value: 'guangxi',
                            label: '广西'
                        }, {
                            value: 'fujian',
                            label: '福建'
                        }
                    ],
                    citylist: [
                        {
                            value: 'shenzhen',
                            label: '深圳'
                        }, {
                            value: 'guangzhou',
                            label: '广州'
                        }, {
                            value: 'dongguan',
                            label: '东莞'
                        }
                    ],
					param: {
                        key: '',
						page: 1,
						size: 10
					},
					total: 0,
                    tableData: []
                }
            },
			created : function () {
				this.getData();
            },
            methods: {
                getData: function () {
                    var _this = this;
					$.post(HOME_URL + '/orderAdmin/Worker/getData', _this.param, function (data) {
						if(data.status){
							_this.total = parseInt(data.data.count);
							_this.tableData = data.data.data;
						}else{
                            _this.$message.error(data.msg);
						}
                    }, 'json');
                },
                handleSizeChange: function (size) {
					this.param.size = size;
					this.getData();
                },
                handleCurrentChange: function (page) {
					this.param.page = page;
					this.getData();
                },
                changeParam: function () {
					this.param.page = 1,
					this.getData();
                },
                toDetail(id) {
                    window.location.href = HOME_URL + "/orderAdmin/Worker/detail?id=" + id;
                }
            }
        })
	</script>
</block>
